import {Breadcrumb, Layout, theme} from 'antd';
import React, { useState } from 'react';
import { Outlet } from "react-router-dom"
import MainMenu from "@/components/HomeMenu/index.tsx"
const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    // const navigateTo = useNavigate()
    return (
        <Layout hasSider>
            <Sider
                collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}
                style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
            >
                <div className="demo-logo-vertical"><span>潘多拉</span></div>
                <MainMenu />
            </Sider>
            <Layout style={{ marginLeft: 200 }}>
                <Header style={{ padding: 0, background: '#001529' }} />
                <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                    <div
                        style={{
                            padding: 24,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default View;